<template>
  <a-form
    :form="form"
    :label-col="{ span: 5 }"
    :wrapper-col="{ span: 12 }"
    @submit="handleSubmit"
  >
    <a-form-item label="上传格式">
      <a-select
        v-decorator="[
          'gender',
          { rules: [{ required: true, message: '请选择上传格式' }] },
        ]"
        placeholder="Select a option and change input text above"
        @change="handleSelectChange"
        mode="multiple"
      >
        <a-select-option value=".pdf"> .pdf </a-select-option>
        <a-select-option value=".dox"> .dox </a-select-option>
      </a-select>
      <a-form-item
        label="Upload"
      >
        <a-upload
          v-decorator="[
            'upload',
            {
              valuePropName: 'fileList',
              getValueFromEvent: normFile,
            },
          ]"
          name="logo"
          action="/upload.do"
          list-type="picture"
          :accept="accept"
        >
          <a-button> <a-icon type="upload" /> Click to upload </a-button>
        </a-upload>
      </a-form-item>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit"> Submit </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      accept: '',
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    handleSelectChange(value) {
      console.log(value);
      this.accept = value.length && value.join(',');
    },
  },
};
</script>